<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="bg-white overflow-hidden rounded-popup" :style="{ 'margin-bottom': marginBottom + 'px' }">
			<slot />
		</view>
	</uni-popup>
</template>

<script>
import { ref } from 'vue';

export default {
	props: {
		disableSafeArea: Boolean,
	},
	setup(props, ctx) {
		const popupRef = ref();
		function open() {
			popupRef.value.open();
		}
		function close() {
			popupRef.value.close();
		}
		let marginBottom = 0;
		if (props.disableSafeArea) {
			const { safeArea, screenHeight } = uni.getSystemInfoSync();
			//通过负值margin禁用uni-pop自身的底部的安全距离
			marginBottom = -(screenHeight - safeArea.bottom);
		}
		return {
			open,
			close,
			popupRef,
			marginBottom,
		};
	},
};
</script>

<style></style>
